<?php $this->_extends('_layouts/share_layout')?>

<?php $this->_block('title'); ?>
Share the fun! Earn free spins by referring your friends.
<?php $this->_endblock(); ?>

<?php $this->_block('keywords');?>
<meta name="keywords" content="<?php echo $site['keywords']; ?>" />
<?php $this->_endblock();?>

<?php $this->_block('description');?>
<meta name="description" content="Share the fun! Earn free spins by referring your friends." />
<?php $this->_endblock();?>
<?php $this->_block('content'); ?>
		<div class="title">Earn 5 free spins for each friend you refer!</div>
		<div class="tr">
			<p id="message" class="sharetext">If you love Lalaloot it is time to spread the word. We love the game so much that for a limited time we will give you 5 free spins for each person you invite that registers. Follow these 3 easy steps:</p>
			<p class="sharetext" style="margin:5px;">(1) import your contact list</p> 
			<p class="sharetext" style="margin:5px;">(2) select friends you want to invite</p> 
			<p class="sharetext" style="margin:5px;">(3) start receiving free spins for each friend that registers</p>
		</div>
		<div class="recommands_lists" style="position: relative;">
			<dl style="float: left; width: 320px; padding: 8px 0">
				<dt class="dt">Choose your E-mail Service Provider</dt>
				<dd style="margin:0;padding-bottom:3px;">
					<select class="step" id="mail_server">
						<option value="AOL">AOL</option>
						<option value="Gmail">Gmail</option>
						<option value="Hotmail">Hotmail</option>
						<option value="Yahoo">Yahoo</option>
					</select>
				<dd>
				<dt class="dt" style="width:70px; text-align:left;">Email:</dt>
				<dd style="margin:0;padding-bottom:3px; width:230px;"><input class="step" type="text" id="email" /></dd>
				
				<dt class="dt" style="width:150px; text-align:left;">Your E-mail Password</dt>
				<dd style="margin:0;padding-bottom:3px; width:230px;"><input class="step" type="password" name="password" id="password" /></dd>
				
				<dt id="tips" style="color:red; padding-bottom:2px"></dt>
				<dd style="margin:0;padding-bottom:3px"><span class="btn-2" name="importContacts" id="importContacts">Import Your Contacts</span></dd>
				
				<dt id="errorbox" style="color:red;width:200px;padding:0px 0px;"></dt>
			</dl>
			<div id="loading_block" style="z-index: 99; position:absolute; left:50px; top:270px; display:none;">
				<img alt="loading" src="<?php echo $img_url ?>loading.gif">
			</div>
			<div id="user_lists" style="float: left; width: 540px">
				<select class="step" id="full_lists" name="full_lists" style="float: left;width: 200px; height: 200px" multiple="multiple"></select>
				<div class="operators" style="float: left; padding:0 15px">
					<span class="btn-3" name="addUser" id="addUser">Add</span><br/>
					<span class="btn-3" name="removeUser" id="removeUser">Remove</span>
				</div>
				<form method="post" action="<?php echo url('user/tellfriends'); ?>" id="tellForm">
					<select class="step" style="float: left;width: 200px; height: 200px;" multiple="multiple" id="selected_users" name="selected_users[]"></select>
				</form>
				<span>You can select up to 10 people</span>
			</div>
			<div class="buttons" style="float: left; width: 148px;">
				<span class="btn-1" name="tellFriends" id="tellFriends">Tell Friends</span><br/>
				<a class="btn-3" href="<?php echo url('user/step3'); ?>">Next</a>
				<div id="errorbox2" style="color:red;width:200px;padding:0px 0px;"></div>
			</div>
			<div class="clear" style="height:30px;"></div>
		</div>

<script type="text/javascript">
	$('#addUser').click(function(){
		$('#full_lists :selected').each(function(i,n){
			if($("#selected_users option").length >= 10){
				alert('You can select up to 10 people!');
				return false; 
			}
			$('#selected_users').append($(this).clone());;
			$(this).remove();
		});
	});
	
	$('#removeUser').click(function(){
		$('#selected_users :selected').each(function(){
			$('#full_lists').append($(this).clone());
			$(this).remove();
		});
	});

	$('#importContacts').click(function(){
		//TODO: get contact list
		var email = $('#email').val();
		if(email == "") {
			$('#errorbox').html('Please enter email');
		}else {
			if(/^([a-zA-Z0-9_-]|\.)+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(email)) {
				$('#loading_block').show();
				$.ajax({
					type: 'GET',
					url: '<?php echo url('user/getcontacts'); ?>',
					data: {contacts_option: $('#mail_server').val(),
						   email: $('#email').val(),
						   password: $('#password').val()
						  },
					success: function(data){
								$('#loading_block').hide();
								if(data['error']) {
									$('#errorbox').html(data['errorMessage']);
								}else if(data instanceof Array){
									$('#errorbox').html('');
									//data = eval('('+data+')');
									var contactlist = '';
									var optionlist = new Array();
									$.each(data, function(index, item){
										optionlist.push('<option selected="selected">'+item.email+'</option>');
										
									});
									optionlist.sort();
									for(var k in optionlist){
										contactlist += optionlist[k];
									}
									$('#full_lists').html(contactlist);
								}
							 },
					dataType: 'json'
				});
			}else {
				$('#errorbox').html('invalid email');
			}
		}
	});

	$('#mail_server').change(function(){
		$('#email').val('');
		$('#password').val('');
	});

	$('#tellFriends').click(function(){
		if($('#selected_users').html() != ''){
			$.ajax({
				type: 'POST',
				url: "<?php echo url('user/tellfriends'); ?>",
				data: $("#tellForm").serialize(),
				success: function(data){
					if(data == 'islogout'){
						window.location.href = "<?php echo url('user/login'); ?>";
					}
					if(data == 'success'){
						$('#errorbox').html('success!');
					}
				}
			});
			//$('#tellForm').submit();
		}else{
			$('#errorbox2').html('Please select friends');
		}
	});
</script>
<?php $this->_endblock(); ?>